<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/muicss/mui.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
</head>
<style>
	.weui-cells__title {
		margin-top: .77em;
		margin-bottom: .3em;
		padding-left: 15px;
		padding-right: 15px;
		color: #999;
		font-size: 14px;
	}
	.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
		color: #003366;
	}
</style>
<body>

<!--底部-->
<nav class="mui-bar mui-bar-tab">
	<div class="weui-tabbar">
		<a href="/sale/order" class="weui-tabbar__item weui-bar__item_on">
			<div class="weui-tabbar__icon">
				<i class="fa fa fa-bars fa-lg" style="color: black"></i>
			</div>
			<p class="weui-tabbar__label">主页</p>
		</a>
		<a href="/sale/saleperson" class="weui-tabbar__item">
			<div class="weui-tabbar__icon">
				<i class="fa fa-user fa-lg" style="color: black"></i>
			</div>
			<p class="weui-tabbar__label">我的</p>
		</a>
	</div>
</nav>
<header class="mui-bar mui-bar-nav">
	<a id="back" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>销售管理</b></font></h1>
	<!--<a id="add" class="mui-pull-right mui-icon-right-nav mui-icon mui-icon-plusempty" style="color: black;font-size:30px;font-weight:900;margin-top:-5px"></a>-->
</header>
<header class="mui-bar mui-bar-nav" style="margin-top: 45px;background-image: linear-gradient(to right, #333333 100px, #999999 200px);color: whitesmoke;" onclick="addsale()">
	<h1 class="mui-title" style="left: 30px"><a class="mui-icon mui-icon-plusempty" style="color: white;font-size:25px;font-weight:900;"></a><font size="4" style="color: white"><b>销售开单</b></font></h1>
	<!--<a id="add" class="mui-pull-right mui-icon-right-nav mui-icon mui-icon-plusempty" style="color: black;font-size:30px;font-weight:900;margin-top:-5px"></a>-->
</header>
<div class="mui-content mui-slider">

	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="z-index: 9999;position: fixed;margin-top: 45px">
		<a class="mui-control-item " href="#allorder">施工中</a>
		<a class="mui-control-item" href="#workingorder">已提交审核中</a>
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6" style="margin-top: 83px;z-index:9999;position:fixed"></div>
	<div class="mui-slider-group" style="margin-top: 83px">
			<!--施工中的订单-->
			<div id="allorder"  class="mui-slider-item mui-control-content">
				<div th:each="order: ${order}">
					<div class="weui-cells" style="margin-top: 0px">
						<div class="weui-cell" style="padding: 0px 15px">
							<div class="weui-cell__bd">
								<p style="margin-bottom: 0px">单号:<span class="orderdetail" th:text="${order.oid}"></span></p>
							</div>
							<div class="weui-cell__ft" style="margin-top: 5px">
								<a class="weui-btn weui-btn_mini" style="background-color: #003366" th:onclick="'javascript:submitsale(\''+${order.oid}+'\')'" >提交</a>
							</div>
						</div>
					</div>
					<ul th:onclick="'javascript:checksale(\''+${order.oid}+'\')'" class="mui-table-view">
						<li class="mui-table-view-cell mui-media" style="line-height: 2">
							<a>
								<div class="weui-flex">
									<div class="mui-media-body" style="white-space: normal;">
										<p style="color: black"><span class="fa fa-suitcase" style="margin-right: 5px"></span><span th:text="${order.servitemname}"></span></p>
									</div>
								</div>
								<p style="color: darkslategrey">车牌:<span style="color: #003366" th:text="${order.carno}"></span><span style="color: darkslategrey;margin-left: 15px">时间:</span><span style="color: #003366" th:text="${#dates.format(order.createtime, 'yyyy-MM-dd HH:mm:ss')}"></span></p>
							</a>
						</li>
					</ul>
					<div class="weui-cells__title"></div><!--间隔一下-->
				</div>
			</div>
			<!--施工完成的订单-->
			<div id="workingorder"  class="mui-slider-item mui-control-content">
				<div class="mui-slider-item mui-control-content ">
					<div th:each="order1: ${order1}">
						<div class="weui-cells" style="margin-top: 0px">
							<div class="weui-cell" style="padding: 5px 15px">
								<div class="weui-cell__bd">
									<p style="margin-bottom: 0px">单号:<span class="orderdetail" th:text="${order1.oid}"></span></p>
								</div>
								<div class="weui-cell__ft" style="margin-top: 5px">
									<a class="weui-btn weui-btn_mini" th:if="${order1.stat==-1}" th:onclick="'javascript:submitsale(\''+${order1.oid}+'\')'"  style="background-color: #003366">重新提交</a>

								</div>
							</div>
						</div>
						<ul th:onclick="'javascript:checksale(\''+${order1.oid}+'\')'" class="mui-table-view">
							<li class="mui-table-view-cell mui-media" style="line-height: 2">
								<a>
									<div class="weui-flex">
										<div class="mui-media-body" style="white-space: normal;">
											<p style="color: black"><span class="fa fa-suitcase" style="margin-right: 5px"></span><span th:text="${order1.servitemname}"></span></p>
										</div>
									</div>
									<p style="color: darkslategrey">车牌:<span style="color: #003366" th:text="${order1.carno}"></span><span style="color: darkslategrey;margin-left: 15px">时间:</span><span style="color: #003366" th:text="${#dates.format(order1.createtime, 'yyyy-MM-dd HH:mm:ss')}"></span></p>
								</a>
							</li>
						</ul>
						<div class="weui-cells__title"></div><!--间隔一下-->
					</div>
				</div>
			</div>
	</div>

</div>

</body>
<script>
	/*订单详情*/
    $(document).ready(function () {
        var storage=window.localStorage;
        storage.clear()
    });

    function addsale() {
        location.href="/sale/create";
    }

	function checksale(oid) {
		location.href="/sale/update?oid="+oid;
    }
    $(".mui-control-item").click(function () {
		var id=$(this).attr('href');
        var gallery = mui('.mui-slider').slider();
		if(id=="#workingorder"){
            gallery.gotoItem(1);
		} else {
            gallery.gotoItem(0);
		}
    });

    function submitsale(oid) {
        $.confirm({
            title: '确认提交',
            text: '提交后不可修改，请问是否继续提交',
            onOK: function () {
                $.showLoading('正在提交...');
                    $.ajax({
                        url: "/sale/updatestat?oid="+oid,
                        type: 'POST',
                        async: false,//同步提交，等ajax代码执行后再往下执行代码
                        contentType: 'application/json',
                        success: function (data) {
                            $.alert("提交成功!");
                            location.href="/sale/order";
                        },
                        error: function (data) {
                            $.alert("提交失败,请重试");
                        }
                    });
                $.hideLoading();
            },
            onCancel: function () {
            }
        });
    }

</script>
</html>
